<?php
// -----------------------------------------------------------------------------
// include
// -----------------------------------------------------------------------------
include "../config/config.php";
include "../auth.php";
// -----------------------------------------------------------------------------
?>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>偏好设置</title>
    <base target="_self">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../resources/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="../global.css">
    <style>
        input, label {
            cursor: pointer;
        }
    </style>
</head>
<body>

<!-- ----------------------------------------------------------------------- -->

<script src="../resources/bootstrap-5.2.0-beta1-dist/js/bootstrap.min.js"></script>
<script src="../resources/jQuery/jquery-3.5.1.js"></script>
<?php include "../globalNavbar.php"; ?>

<!-- ----------------------------------------------------------------------- -->

<!--div:container start-->
<div class="mainContainer container container-fluid mb-5">

    <!-- 导航栏 开始 -->
    <div class="mt-3">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item mt-0"><a class="text-decoration-none" href="<?php echo $homepage; ?>">首页</a></li>
                <li class="breadcrumb-item mt-0 active">偏好设置</li>
            </ol>
        </nav>
    </div>
    <!-- 导航栏 结束 -->

    <div class="card mt-2">
        <div class="card-header">导航查看页面</div>
        <div class="card-body">

            <p class="mb-2">常用偏好设置：</p>

            <div class="form-check form-switch">
                <input class="form-check-input"
                       type="checkbox"
                       role="switch"
                       name="navPageOpenLinkInNewTab"
                       id="openLinkInNewTab">
                <label class="form-check-label" for="openLinkInNewTab">在新标签页中打开链接</label>
            </div>

            <!-- ----------------------------------------------------------- -->

            <div class="form-check form-switch">
                <input class="form-check-input"
                       type="checkbox"
                       role="switch"
                       name="navPageShowMostOftenClicked"
                       id="showMostOftenClicked">
                <label class="form-check-label" for="showMostOftenClicked">显示「最常访问」</label>
            </div>

            <!-- ----------------------------------------------------------- -->

            <div class="form-check form-switch">
                <input class="form-check-input"
                       type="checkbox"
                       role="switch"
                       name="navPageShowRecentlyClicked"
                       id="showRecentlyClicked">
                <label class="form-check-label" for="showRecentlyClicked">显示「最近访问」</label>
            </div>

            <!-- ----------------------------------------------------------- -->

            <div class="form-check form-switch">
                <input class="form-check-input"
                       type="checkbox"
                       role="switch"
                       checked
                       name="navPageShowBadges"
                       id="showBadges">
                <label class="form-check-label" for="showBadges">显示网址数量、点击次数</label>
            </div>

            <!-- ----------------------------------------------------------- -->

            <hr>

            <div class="mt-3">

                <p class="mb-2">链接排序方式：</p>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="linkSortOrder" id="inputLinkSortOrder1" value="1">
                    <label class="form-check-label" for="inputLinkSortOrder1">
                        按排序号排列
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="linkSortOrder" id="inputLinkSortOrder2" value="2">
                    <label class="form-check-label" for="inputLinkSortOrder2">
                        点击数多靠前
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="linkSortOrder" id="inputLinkSortOrder3" value="3">
                    <label class="form-check-label" for="inputLinkSortOrder3">
                        最近添加靠前
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="linkSortOrder" id="inputLinkSortOrder4" value="4">
                    <label class="form-check-label" for="inputLinkSortOrder4">
                        最近编辑靠前
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="linkSortOrder" id="inputLinkSortOrder5" value="5">
                    <label class="form-check-label" for="inputLinkSortOrder5">
                        最近移动靠前
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="linkSortOrder" id="inputLinkSortOrder6" value="6">
                    <label class="form-check-label" for="inputLinkSortOrder6">
                        最近访问靠前
                    </label>
                </div>

            </div>

            <!-- ----------------------------------------------------------- -->

            <hr>

            <div class="mt-3">

                <p class="mb-2">每行最大显示链接数：</p>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="maxNumberOfLinksShowInRow" id="inputMaxNumber2" value="2">
                    <label class="form-check-label" for="inputMaxNumber2">
                        2个
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="maxNumberOfLinksShowInRow" id="inputMaxNumber3" value="3">
                    <label class="form-check-label" for="inputMaxNumber3">
                        3个
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="maxNumberOfLinksShowInRow" id="inputMaxNumber4" value="4">
                    <label class="form-check-label" for="inputMaxNumber4">
                        4个
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="maxNumberOfLinksShowInRow" id="inputMaxNumber5" value="5">
                    <label class="form-check-label" for="inputMaxNumber5">
                        5个
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="maxNumberOfLinksShowInRow" id="inputMaxNumber6" value="6">
                    <label class="form-check-label" for="inputMaxNumber6">
                        6个
                    </label>
                </div>

            </div>

            <!-- ----------------------------------------------------------- -->

            <hr>

            <div class="mt-3">

                <p class="mb-2">每行最小显示链接数：</p>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="miniNumberOfLinksShowInRow" id="inputMiniNumber1" value="1">
                    <label class="form-check-label" for="inputMiniNumber1">
                        1个
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="miniNumberOfLinksShowInRow" id="inputMiniNumber2" value="2">
                    <label class="form-check-label" for="inputMiniNumber2">
                        2个
                    </label>
                </div>

            </div>

            <!-- ----------------------------------------------------------- -->

        </div>
    </div>

</div>
<!--div:container start-->

<!-- ----------------------------------------------------------------------- -->
<script src="option.js"></script>
<!-- ----------------------------------------------------------------------- -->

<!--全局变量-->
<script>
    const optionStrKey = "<?php echo $optionStrName; ?>"
</script>

<!-- ----------------------------------------------------------------------- -->

<!--网页加载时自动运行-->
<script>
    $(function () {
        let optionStr = localStorage.getItem(optionStrKey) // 取得本地存储的偏好设置数据

        if (optionStr == null) { // 检测到本地尚未添加偏好设置
            resetOptionsStr() // 在 localStorage 中新建一个键值对，用于存储偏好设置，将其值设置为预先定义好的默认的偏好设置
            optionStr = localStorage.getItem(optionStrKey) // 将默认的偏好设置存储在 optionStr 变量中，方便在下一步中初始化各选项的选中状态
        }

        setOptions(optionStr) // 根据 optionStr 中存储的偏好设置，初始化各选项的选中状态
    })
</script>

<!-- ----------------------------------------------------------------------- -->

<script>
    /**
     * 点击按钮，变更选项状态时执行
     */
    $(".form-check-input").on("change", function (e) {

        /* 取得 json 字符串 */

        let optionStr = localStorage.getItem(optionStrKey)

        /* json 字符串转成对象 */

        let optionObj = JSON.parse(optionStr)

        /* 修改 json 对象的值 */

        const key = $(this).prop("name")
        let value = ""

        if (key == "maxNumberOfLinksShowInRow" || key == "miniNumberOfLinksShowInRow" || key == "linkSortOrder") {
            optionObj[key] = $(this).val()
        } else {
            optionObj[key] = $(this).prop("checked") == true;
        }

        /* json 对象转字符串，存入本地 */

        optionStr = JSON.stringify(optionObj)
        localStorage.setItem(optionStrKey, optionStr)

    })
</script>

<!-- ----------------------------------------------------------------------- -->

</body>
</html>